<template>
  <div class="basefood_box">
    <loading></loading>
    <div @click="getbasemes">
      <leftopic>
        <div slot="firstfont">今</div>
        <div slot="secondfont">天</div>
        <div slot="thirdfont">美</div>
        <div slot="fourfont">食</div>
        <div slot="fivefont"></div>
      </leftopic>
    </div>
    <div class="base_context">
      <div class="basefood_context" v-for='(item,index) in items' :key = index >
        <div class="basebox_img">
          <img src="../assets/base.jpg"   />
          <div class="baseimg_context">
            <p>{{item.topic}}</p>
          </div>
        </div>
        <div class="base_read">
          {{item.context}}
        </div>
      </div>
    </div>
    <div v-if="load_basebool">
    <vue-loading type="spiningDubbles" color="black" :size="{ width: '60px'}" :style="{position:'relative'}"></vue-loading>
    </div>
  </div>
</template>
<script src="../js/basefood.js"></script>
<style scoped>
  @import "../css/basefood.css";
</style>
